<template>
    <view>
        <custom><template #backText>确认订单</template></custom>
        <view class="bg-gradual-tb-nddyny padding-lr-26 padding-top-20 padding-bottom-70">
            <view class="cu-list menu radius-16 bg-white">
                <nMenuItemRow1 v-if="!address.address_id" left_icon="cuIcon-locationfill" uri="/user/address/list?is_select=1" title="请选择收货地址"
                    right_icon="arrow" class_title="text-15"></nMenuItemRow1>
                <nMenuItemRow2 v-else left_icon="cuIcon-locationfill" :top_title="address.province_city_area_name + ' ' + address.address_remark"
                    :bottom_title="address.name + (address.sex==0?'(先生)':(address.sex==1?'(女士)':'')) + ' ' + address.phone"
                    uri="/user/address/list?is_select=1" right_icon="arrow" class_top_title="text-15"></nMenuItemRow2>
            </view>
        </view>
        <view class="bg-white margin-lr-26 radius-10 padding-lr-26 padding-tb-30" style="margin-top: -50rpx;">
            <view class="text-gray text-15">自营</view>
            <view class="flex justify-between margin-top-30">
                <view class="flex">
                    <view>
                        <image class="radius-10" :src="page.logo | ossUrl(100)" style="width: 100rpx; height: 100rpx;"></image>
                    </view>
                    <view class="margin-left-20">
                        <view class="text-df text-cut-2">{{page.name}}{{page.name}}{{page.name}}{{page.name}}</view>
                        <view class="text-gray margin-top-10">x 1</view>
                    </view>
                </view>
                <view class="text-lg text-bold margin-left-40">
                    <text class="text-sm">￥</text>{{page.price | floor}}
                </view>
            </view>
            <view class="flex align-center justify-between margin-top-40">
                <view class="text-15">包装费</view>
                <view class="text-lg text-bold"><text class="text-sm">￥</text>0</view>
            </view>
            <view class="flex align-center justify-between margin-top-30">
                <view class="text-15">配送费</view>
                <view class="text-lg text-bold"><text class="text-sm">￥</text>0</view>
            </view>
            <view class="solid-top margin-top-40 padding-top-30 flex justify-end">
                <view>
                    <text class="text-15">小计</text>
                    <text class="text-sm">￥</text>
                    <text class="text-xxl text-bold">{{page.price | floor}}</text>
                </view>
            </view>
        </view>
        <view class="padding-lr-26 padding-tb-20">
            <view class="cu-list menu radius-16 bg-white">
                <nMenuItemRow1 title="支付方式" right_icon="arrow" arrow_title="支付宝"></nMenuItemRow1>
            </view>
        </view>
        <foot :height="120">
            <template #content>
                <view class="flex width-100p">
                    <view class="flex flex-sub align-center justify-end text-right">
                        <view>
                            <view style="margin-top: -8rpx;">
                                <text class="text-15">合计</text>
                                <text class="text-sm text-nddyny">￥</text>
                                <text class="text-xxl text-bold text-nddyny">{{page.price | floor}}</text>
                            </view>
                            <view class="text-nddyny" style="margin-top: -8rpx">
                                <text class="text-sm">包装费</text>
                                <text class="text-sm">￥</text>
                                <text class="text-15 text-bold">0</text>
                                <text class="text-sm padding-left-14">配送费</text>
                                <text class="text-sm">￥</text>
                                <text class="text-15 text-bold">0</text>
                            </view>
                        </view>
                    </view>
                    <view @tap="pay.show = true" class="cu-btn bg-nddyny text-17 height-100p margin-left-24" style="width: 250rpx; height: 120rpx;">提交订单</view>
                </view>
            </template>
        </foot>
        <pay :pay.sync="pay" :paySuccess="paySuccess"></pay>
    </view>
</template>

<script>
    export default {
        data() {
            return {
                pay: {
                    formtag: {},
                    form: {
                        gift_id: '',
                        gift_attr: '',
                        address_id: ''
                    },
                    tip_content: '确定要购买礼包吗？',
                    pay_uri: '/userPay/promoterGift/pay',
                    show: false,
                    load_info: {},
                },
                data: {
                    form: {
                        gift_id: null
                    }
                },
                page: {
                    album_1: '',
                    album_2: '',
                    album_3: '',
                    album_4: '',
                    album_5: '',
                    attr: '',
                    banner: '',
                    content: '',
                    gift_type: '',
                    limit_amount_only: '',
                    logo: '',
                    name: '',
                    price: '',
                    reward_amount: '',
                    reward_gold_share_amount: '',
                },
                address: {
                    address_id: '',
                    province_city_area_name: '',
                    address_remark: '',
                    name: '',
                    phone: '',
                    tag: '',
                    sex: '',
                    is_default: ''
                }
            }
        },
        onLoad(params) {
            if (!params.gift_id) {
                this.$store.commit('userReTo', '/user/promote/gift/list');
                return
            }
            this.pay.load_info = params;
            this.pay.form.gift_id = this.data.form.gift_id = params.gift_id;
            this.pageInit();
        },
        watch: {
            'pay.formtag.address_id'() {
                if (this.pay.formtag.address_id) {
                    this.$store.commit('userToastNone', '请选择收货地址');
                    this.pay.formtag.address_id = '';
                }
            }
        },
        methods: {
            pageInit(action) {
                this.$api.post(this, {
                    url: '/user/PromoterGift/info',
                    success: (Result) => {
                        if (this.$api.form.toast(this, Result)) return;
                        this.page = Result.result;
                    }
                });
            },
            backData(info) {
                this.address = info;
                this.pay.form.address_id = info.address_id;
            },
            paySuccess() {
                this.$store.commit('userIsLoginToMyPage');
            }
        }
    }
</script>
